<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>VUE学习 - 实例方法</title>
</head>

<body>


  <!--载入vue.js-->
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

  <div id="Application">
    为什么要用实例？<br />
    当我们需要用到不同的后端域名，直接调用axios.get并不太方便。<br />
    我们可以用创建实例的方式去调用，不同的域名用不同的实例一一对应。



    您的名字是：{{data.name}} <br />
    您的ID是：{{data.id}}

  </div>
  <script>
    const app = Vue.createApp({
      setup() {
        const data = Vue.ref("");
        const created = () => {
          let instance = axios.create({
            baseURL: 'https://rouse.npc.ink',//基本请求路径
            timeout: 1000,//超时设定
            //baseURL:'http://localhost:8080',//请求的域名、基本地址
            //timeout:1000,//请求超时时长（ms）
            //url:'/data.json',//请求路径
            //method:'get，post，put，patch,delete',//请求方法
            //headers:{
            //  token:''//代表当前登陆人的身份信息
            //},//设置请求头
            //params:{},//将请求参数拼接在url上，是一个对象
            //data:{}//将请求参数放在请求体里，是一个对象

          })
          instance.get('/api/data.php')
            .then(response => {
              data.value = response.data;
            })

          //使用场景通常是发起请求时，顺带传送参数：

          //以get请求为例，get有两个配置，分别是相对路径和config
          //axios.get('/data.json',{
          // params:{
          //    //参数
          // }
          //})

        }
        created()

        return { data };

      },
    })

    app.mount("#Application")
  </script>

</body>

</html>